<template>
  <div class="sign-wrap">
    <div class="sign-in">
      <IconLogoText />

      <div class="sign-form__wrap">
        <el-form ref="formRef" :model="formData" label-width="0px" :rules="rules" @submit.native.prevent="onSubmit">
          <!-- <p class="sf-tips">你所在地区仅支持 手机号 / 微信 / 邮箱 登录</p> -->
          <p class="sf-tips">你所在地区仅支持 手机号 登录</p>
          <el-form-item prop="username">
            <el-input
              v-model="formData.username"
              prefix-icon="el-icon-mobile-phone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>

          <el-form-item class="form-pwd" prop="password">
            <el-input
              v-model="formData.password"
              :type="viewPwd ? 'text' : 'password'"
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
            >
              <div slot="suffix" class="pointer" @click="handleViewPwd">
                <IconView v-show="viewPwd" />
                <IconHide v-show="!viewPwd" />
              </div>
            </el-input>
          </el-form-item>

          <!-- <p class="sf-tips">注册登录即代表已阅读并同意我们的 用户协议 与 隐私政策</p> -->

          <el-form-item class="form-submit">
            <el-button class="form-submit__btn" type="primary" native-type="submit">登录</el-button>
          </el-form-item>
        </el-form>

        <div class="sign-up__btn">
          <router-link to="/signUp">立即注册</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// create
import { createForm } from './create'
import { createFormFules } from '../SignUp/create'
/* request */
import { apiLogin } from '@/api/login/index'
// util
import { setLoginInfo } from '@/utils/storage.js'

export default {
  name: 'SignIn',

  data() {
    return {
      formData: createForm(),
      rules: createFormFules(this),

      viewPwd: false
    }
  },

  methods: {
    handleViewPwd() {
      this.viewPwd = !this.viewPwd
    },

    onSubmit() {
      this.$refs.formRef
        .validate()
        .then(res => {
          this.apiLogin(this.formData)
        })
        .catch(err => {
          console.log(err)
        })
    },

    apiLogin(data) {
      apiLogin(data)
        .then(res => {
          console.log('apiLogin', res)
          this.$message.success('登录成功')
          setLoginInfo(res)
          this.$router.push({ name: 'index' })
        })
        .catch(err => console.log('[apiLogin err]', err))
    }
  }
}
</script>

<style lang="less">
@import url('./sign.less');
</style>
